<script setup>
import { ref,reactive, readonly } from 'vue'

defineProps({
  msg: String,
})

const count = ref(0)
const message = ref('')
const inputValue = ref(10)
const phone = ref('')
const titleShowFlag = ref(true)
const user = reactive({
  name: 'acy',
  age:30,
  address:'shenzhen'
})
console.log(message);
console.log(user)

message.value = "你好！"
console.log(message);

console.log(user.name)
user.name = 'wang'
console.log(user)


function showName(){
  window.alert(user.name)
}

const showData = readonly("展示信息专用！")
console.log(showData);
//不能为只读数据修改内容
//showData.value = '哈哈'

const plusData = ()=>{
  count.value += inputValue.value
  console.log(phone.value)
}

const changeTitleShow = ()=>{
  titleShowFlag.value = !titleShowFlag.value
}

</script>

<template>
  <h1>{{ msg }}</h1>
  <h2>{{ message }}</h2>
  <h2>{{ user.name }}</h2>
  <div class="card">
    <input type="text" v-model.trim="phone" placeholder="请输入手机型号">
    <input type="number" v-model.number="inputValue">
    <button type="button" @click="plusData()">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
    <button @click="showName()">提示名字</button>
  </div>
  <!-- <div>
    <button @click="changeTitleShow()">{{titleShowFlag ? '隐藏' : '显示'}}</button>
    <h2 v-show="titleShowFlag">标题文字</h2>
  </div> -->

  <div>
    <button @click="changeTitleShow()">{{titleShowFlag ? '隐藏' : '显示'}}</button>
    <h2 v-if="titleShowFlag">标题文字</h2>
    <h3 v-else>补充内容</h3>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
